<!--
 * @Author: liucong19
 * @Date: 2021-07-17 11:02:48
 * @LastEditTime: 2021-07-23 14:22:13
 * @LastEditors: liucong19
 * @Description: 使用 video.js 播放视频
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用 video.js 播放视频</title>
  <link rel="stylesheet" href="lib/videojs/video.css" />
  <style>
    .video-container {display: flex; justify-content: center; align-items: center;}
    .video-js .vjs-big-play-button {width: 50px; height: 50px; border-radius: 50%; }
  </style>
</head>
<body>
  <p>video.js 5.x 及以下版本包含 Flash 支持，6.x 及以上需要引入 videojs-flash.js 插件才能播放 RTMP 视频流（Chrome 已不支持 Flash，只能在 IE 播放）</p>
  <p>video.js 7.x 默认支持 HLS 视频流（m3u8格式），7.x之前的版本需要引入 videojs-http-streaming.js 插件才能播放 HLS 视频流</p>

  <div class="video-container">
    <video id="video" class="video-js vjs-big-play-centered" width="800" height="450" controls ></video>
  </div>

  <script src="lib/videojs/video.js"></script>
  <!-- 引入 videojs-flash.js 插件是为播放 rtmp 视频流-->
  <script src="lib/videojs/videojs-flash.js"></script>
  <script src="lib/videojs/zh-CN.js"></script>

  <script type="module">
    // IE11 不支持 import / export 语法
    import sources from './sources.js'

    // 配置项
    const options = {
      // 设置为中文
      language: 'zh-CN',
      //播放速度
      playbackRates: [0.7, 1.0, 1.5, 2.0],
      // 视频源
      sources: [
        {
          // HLS 流
          src: sources.hls[0],
        },
        {
          // RTMP 流，需要引入 flash 插件，只有 IE 才能播放
          src: 'rtmp://58.200.131.2:1935/livetv/cctv1',
        }
      ],
    }

    // 创建实例
    let player = videojs('video', options)


  </script>
</body>
</html>